<%--
  Created by IntelliJ IDEA.
  User: 15941
  Date: 2020/3/15
  Time: 18:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8" lang="zh">
    <title>酒店住户信息管理系统</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- 引入bootstrap -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- echarts -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="../../static/js/westeros.js"></script>
    <!--vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- <script src="/static/js/vue.min.js"></script> -->


    <style>
        #nav {
            width: 187px;
            height: 875px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 3px 0px 15px rgba(0, 0, 0, 0.05);
            opacity: 1;
            padding-top: 28px;
            float: left;
        }

        ul {
            list-style: none;
            padding: 0;
        }

        #logo {
            width: 45px;
            height: 26px;
            font-size: 20px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            line-height: 26px;
            color: rgba(71, 137, 255, 1);
            opacity: 1;
            padding-left: 70px;
            padding-right: 72px;
            padding-bottom: 52px;
        }

        #nav ul li {
            height: 58px;
        }

        #nav img {
            padding-left: 43px;
        }

        #nav a {
            width: 52px;
            height: 16px;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 16px;
            color: rgba(158, 173, 197, 1);
            margin-left: 11px;
            line-height: 58px;
            letter-spacing: 3px;
            text-decoration: none;
            opacity: 1;
        }

        #user {
            float: left;
            margin-top: 56px;
            margin-left: 893px;
        }


        #totle {
            margin-top: 35px;
            float: left;
        }

        .blue {
            width: 230px;
            height: 93px;
            background: linear-gradient(134deg, rgba(115, 165, 255, 1) 0%, rgba(64, 132, 254, 1) 100%);
            box-shadow: 0px 0px 6px rgba(15, 62, 188, 0.03);
            opacity: 1;
            border-radius: 7px;
            float: left;
            margin-left: 38px;
        }

        .blue .name {
            /* width: 56px; */
            height: 19px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 19px;
            color: rgba(201, 222, 255, 1);
            opacity: 1;
            margin-top: 14px;
            text-align: center;
        }

        .blue .digit {
            /* width: 108px; */
            height: 35px;
            font-size: 30px;
            font-family: San Francisco Display;
            font-weight: bold;
            line-height: 35px;
            color: rgba(255, 255, 255, 1);
            opacity: 1;
            text-align: center;
            margin-top: 8px;
        }

        .white {
            width: 230px;
            height: 93px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 0px 6px rgba(15, 62, 188, 0.03);
            opacity: 1;
            border-radius: 7px;
            float: left;
            margin-left: 32px;
        }

        .white .name {
            /* width:56px; */
            height: 19px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 19px;
            color: rgba(158, 173, 197, 1);
            opacity: 1;
            margin-top: 14px;
            text-align: center;
        }

        .white .digit {
            /* width:93px; */
            height: 35px;
            font-size: 30px;
            font-family: San Francisco Display;
            font-weight: bold;
            line-height: 35px;
            color: rgba(71, 137, 255, 1);
            opacity: 1;
            text-align: center;
            margin-top: 8px;
        }

        #room {
            width: 313px;
            height: 293px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05);
            opacity: 1;
            border-radius: 7px;
            float: left;
            margin-top: 24px;
            margin-left: 38px;
        }

        #live {
            width: 677px;
            height: 293px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05);
            opacity: 1;
            border-radius: 7px;
            float: left;
            margin-top: 24px;
            margin-left: 27px;
            /* padding-left: 37px; */
        }

        #live #pretotle {
            width: 167px;
            height: 76px;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(71, 137, 255, 1);
            box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);
            opacity: 0.8;
            border-radius: 7px;
            float: left;
        }

        #pretotle .number {
            width: 59px;
            height: 21px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            line-height: 21px;
            color: rgba(71, 137, 255, 1);
            opacity: 1;
            margin-left: 20px;
            margin-top: 21px;
            float: left;
        }

        #pretotle .name {
            height: 14px;
            font-size: 10px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 14px;
            color: rgba(189, 189, 189, 1);
            opacity: 1;
            margin-top: 6px;
            margin-left: 20px;
            float: left;
        }

        #pretotle .pretotledigit {
            width: 23px;
            height: 14px;
            font-size: 10px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 14px;
            color: rgba(123, 206, 158, 1);
            opacity: 1;
            float: left;
            margin-top: 7px;
            margin-left: 2px;
        }

        #money {
            width: 1017px;
            height: 290px;
            background: rgba(255, 255, 255, 1);
            opacity: 1;
            border-radius: 7px;
            float: left;
            margin-top: 24px;
            margin-left: 38px;
        }

        #live #real {
            width: 167px;
            height: 76px;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(71, 137, 255, 1);
            box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);
            opacity: 0.8;
            border-radius: 7px;
            float: left;
            margin-top: 17px;
        }

        #real .number {
            width: 59px;
            height: 21px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            line-height: 21px;
            color: rgba(30, 203, 193, 1);
            margin-left: 20px;
            margin-top: 21px;
            float: left;
            opacity: 1;
        }

        #real .name {
            height: 14px;
            font-size: 10px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 14px;
            color: #7BCE9E;
            opacity: 1;
            margin-top: 6px;
            margin-left: 20px;
            float: left;
        }

        #real .realtotledigit {
            width: 23px;
            height: 14px;
            font-size: 10px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 14px;
            color: #FE5F5F;
            opacity: 1;
            float: left;
            margin-top: 7px;
            margin-left: 2px;
        }
    </style>

    <script type="text/javascript">
        function display(x) {
            x.style.background = "linear-gradient(90deg,rgba(71,137,255,0.47) 0%,rgba(71,137,255,0.1) 56%,rgba(36,69,128,0) 100%)";
            var name = x.className;
            name = "../../images/index/" + name + "(1).png";
            // alert(name);
            x.firstElementChild.src = name;
        }

        function normal(x) {
            x.style.background = "#FFFFFF";
            var name = x.className;
            name = "../../images/index/" + name + ".png";
            // alert(name);
            x.firstElementChild.src = name;
        }
    </script>

</head>

<body style="background:rgba(244,247,251,1);width:1280px;">


<!-- 导航条 -->
<div id="nav">
    <div id="logo">logo</div>
    <ul>
        <li class="usermanage" onmousemove="display(this)" onmouseout="normal(this)">
            <img class="img" src="../../images/index/usermanage.png"/>
            <a href="/udo/query">用户管理</a>
        </li>
        <li class="hotelmanage" onmouseover="display(this)" onmouseout="normal(this)">
            <img src="../../images/index/hotelmanage.png"/>
            <a href="#">酒店事务</a>
        </li>
        <li class="hotelmoney" onmouseover="display(this)" onmouseout="normal(this)">
            <img src="../../images/index/hotelmoney.png"/>
            <a href="#">酒店财务</a>
        </li>
        <li class="managedata" onmouseover="display(this)" onmouseout="normal(this)">
            <img src="../../images/index/managedata.png"/>
            <a href="#">运营数据</a>
        </li>
        <li class="basesettings" onmouseover="display(this)" onmouseout="normal(this)">
            <img src="../../images/index/basesettings.png"/>
            <a href="#">基础配置</a>
        </li>
        <li class="backstagesettings" onmouseover="display(this)" onmouseout="normal(this)">
            <img src="../../images/index/backstagesettings.png"/>
            <a href="#">后台设置</a>
        </li>
    </ul>
</div>

<script type="text/javascript">
    autodivheight();

    function autodivheight() { //函数：获取尺寸
        //获取浏览器窗口高度
        var winHeight = 0;
        if (window.innerHeight)
            winHeight = window.innerHeight;
        else if ((document.body) && (document.body.clientHeight))
            winHeight = document.body.clientHeight;
        //通过深入Document内部对body进行检测，获取浏览器窗口高度
        if (document.documentElement && document.documentElement.clientHeight)
            winHeight = document.documentElement.clientHeight;
        //DIV高度为浏览器窗口的高度
        document.getElementById("nav").style.height = winHeight + "px";

    }

    window.οnresize = autodivheight; //浏览器窗口发生变化时同时变化DIV高度
</script>

<!-- 用户 -->
<div id="user">
    <img src="../../images/index/帮助.png"/>
    <img src="../../images/index/通知.png" style="margin-left:36px;"/>
    <img src="../../images/index/图像 2.png"
         style="width:40px;height:40px;background:rgba(255,255,255,1);border-radius:50%;opacity:1;margin-left:28px;"/>
    <img src="../../images/index/路径 1146@2x.png" style="width:7px"/>
</div>

<!-- 数据概要 -->
<div id="totle">
    <!-- 今日收益 -->
    <div class="blue">
        <div class="name">今日收益</div>
        <div class="digit">123456</div>
    </div>
    <!-- 今日收益 -->
    <div class="white">
        <div class="name">今日支出</div>
        <div class="digit">45673</div>
    </div>
    <!-- 今日收益 -->
    <div class="white">
        <div class="name">今日客流量</div>
        <div class="digit">2345</div>
    </div>
    <!-- 今日收益 -->
    <div class="white">
        <div class="name">今日订单</div>
        <div class="digit">3411</div>
    </div>
</div>


<!-- 客房情况 -->
<div id="room">
    <script>
        var myChart = echarts.init(document.getElementById('room'));
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            title: {
                text: '住房情况',
                y: 28,
                x: 20,
                textStyle: {
                    fontSize: 16,
                    fontWeight: 'bold',
                    color: '#4F4F4F',
                }
            },
            legend: {
                orient: 'horizontal',
                x: 'center',
                bottom: 15,
                data: ['已入住', '预定', '空闲', '维修'],
                icon: "circle",
                textStyle: {
                    rich: {
                        a: {
                            fontSize: 16,
                            color: "#EA5504",
                            padding: 10
                        },
                        b: {
                            fontSize: 14,
                            color: "#333"
                        }
                    }
                }
            },
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: ['38%', '50%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [{
                    value: 335,
                    name: '已入住',
                    itemStyle: {
                        color: '#D4EAFF'
                    },
                },
                    {
                        value: 310,
                        name: '预定',
                        itemStyle: {
                            color: '#A2D0FC'
                        },
                    },
                    {
                        value: 234,
                        name: '空闲',
                        itemStyle: {
                            color: '#78B5FF'
                        },
                    },
                    {
                        value: 135,
                        name: '维修',
                        itemStyle: {
                            color: '#5A9DFF'
                        },
                    }
                ]
            }]
        };
        myChart.setOption(option);
    </script>
</div>


<!-- 入住情况 -->
<div id="live">
    <img src="../../images/index/路径 1146@2x.png"
         style="width:7px;float:right;margin-right:38px;margin-top:32px;"/>
    <div id="chart" style="width:450px;height:260px;float:left;margin-left:37px;margin-top:31px">
        <script>
            var myChart = echarts.init(document.getElementById('chart'));
            var option = {
                title: {
                    text: '入住情况',
                    textStyle: {
                        fontSize: 16,
                        fontWeight: 'bold',
                        color: '#000000',
                        fontFamily: 'Microsoft YaHei',
                    },
                },
                legend: {
                    data: ['预订数量', '实际入住'],
                    icon: "circle",
                },
                grid: {
                    left: 30,
                },
                tooltip: {},
                xAxis: {
                    data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
                    axisLine: {
                        lineStyle: {
                            color: '#EFF0F5',
                        },
                    },
                    axisLabel: {
                        color: '#9EADC5',
                    },
                },
                yAxis: {
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: '#9EADC5',
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#EFF0F5',
                        },
                    },
                },
                series: [{
                    name: '预订数量',
                    type: 'bar',
                    data: [600, 550, 390, 650, 410, 390, 400],
                    color: '#4789FF',
                    barWidth: 10,
                },
                    {
                        name: '实际入住',
                        type: 'bar',
                        data: [450, 410, 580, 380, 390, 570, 450],
                        color: '#1ECBC1',
                        barWidth: 10,
                    }
                ]
            }
            myChart.setOption(option)
        </script>
    </div>

    <div id="pretotle" style="margin-top:53px">
        <div class="number">¥88888</div>
        <img src="../../images/index/路径 1144@2x.png"
             style="width:7px;float:left;margin-left:68px;margin-top:26px;margin-right:5px;margin-bottom:5px"/>
        <div class="name">预订数量</div>
        <img src="../../images/index/增长箭头.png" style="width:13px;margin-left:4px;margin-top:7px;float:left"/>
        <div class="pretotledigit">5.7%</div>


    </div>
    <div id="real">
        <div class="number">¥88888</div>
        <img src="../../images/index/路径 1145@2x.png"
             style="width:7px;float:left;margin-left:68px;margin-top:26px;margin-right:5px;margin-bottom:5px"/>
        <div class="name">预订数量</div>
        <img src="../../images/index/增长箭头(1).png" style="width:13px;margin-left:4px;margin-top:7px;float:left"/>
        <div class="realtotledigit">5.7%</div>


    </div>
</div>


<!-- money -->
<div id="money">
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('money'));
        var option = {
            title: {
                text: '月收益情况',
                x: 20,
                y: 15,
                textStyle: {
                    fontSize: 16,
                    fontWeight: 'bold',
                    color: '#2D3444',
                    fontFamily: 'Microsoft YaHei',
                }
            },
            legend: {
                data: ['巴啦啦能量1', '巴啦啦能量2'],
                icon: "circle",
                y: 20,
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21'],
                axisLine: {
                    lineStyle: {
                        color: '#EFF0F5',
                    },
                },
                axisLabel: {
                    color: '#9EADC5',
                },
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    color: '#9EADC5',
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    lineStyle: {
                        color: '#EFF0F5',
                    },
                },
            },
            tooltip: {
                trigger: 'axis',
            },
            series: [{
                name: '巴啦啦能量1',
                data: [820, 932, 901, 934, 1290, 1330, 1320, 2245, 1831, 2012, 1242, 1234, 1234, 1231, 1812, 1451, 1242, 1234, 1241, 1431, 1143],
                type: 'line',
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(71,137,255,0.6)' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(71,137,255,0)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
                lineStyle: {
                    color: '#4789FF',
                },
                itemStyle: {
                    color: '#4789FF',
                },
                showSymbol: false,
                smooth: true,
            },
                {
                    name: '巴啦啦能量2',
                    data: [1414, 2122, 2001, 1934, 1501, 1630, 1920, 1845, 1631, 1812, 1642, 1234, 1834, 1831, 2212, 2451, 2242, 2734, 2241, 2631, 2843],
                    type: 'line',
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(67,179,180,0.6)' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(67,179,180,0)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    },
                    lineStyle: {
                        color: '#43B3B4',
                    },
                    itemStyle: {
                        color: '#43B3B4',
                    },
                    showSymbol: false,
                    smooth: true,
                },
            ]
        };
        myChart.setOption(option);
    </script>

</div>
</body>

</html>
